---
slug: 加载和处理其他资源 #路径，不能重复
title: 加载和处理其他资源 # 标题
authors: [] # 作者，在authors.yml配置
tags: [facebook, hello, docusaurus] # 标签，在tags.yml配置
toc_min_heading_level: 2 # 最小展示标题
toc_max_heading_level: 5 # 最大展示标题
---

### 图片资源处理

> webpack5内置了资源模块功能默认处理了常见的静态资源(jpg,png....)


* Webpack 5 默认将 .png、.jpg、.svg、.woff 等常见静态资源视为 asset/resource 类型。这意味着：
    * 文件会被复制到输出目录（默认在 dist 下）。
    * 在代码中引用资源时，Webpack 自动替换为文件输出路径（如 dist/image.png）。

**因此：即使不配置也可以正常工作**

~~但是这样不配置存在风险及不可控~~

```js title="webpack.config.js"
// webpack.config.js
module: {
  rules: [
    {
      test: /\.(png|jpe?g)$/,
      type: 'asset/resource',
      generator: {
        filename: 'images/[hash][ext]' // 指定输出路径
      }
    }
  ]
}
```

### 资源模块类型

> webpack5中引入asset module type替代资源处理的loader(file-loader,url-loader,raw-loader)

* asset/resource 发送一个单独的文件并导出URL，之前通过file-loader实现

* asset/inline 导出一个资源的data URI，之前使用url-loader实现

* asset/source 导出资源的源代码，之前使用raw-loader实现

* asset  在导出一个data URI和发送一个单独的文件之间自动选择，之前使用url-loader，并且配置资源体积实现


